<script setup>
import {goCommunity, goService} from "../../tools/go";
import {ref} from "vue";
const activeItem = ref('活动');
const list2 = [
    {id:'1',img:'src/static/img/server/neighborhoodimg/lft.png',tiltl:'开展"信福暖锋 以爱换绿"雷锋月主题活动',tiem:'2025-1-05  15:00'},
  {id:'2',img:'src/static/img/server/neighborhoodimg/qnt.png',tiltl:'开展"青年有话说"活动"雷锋月主题活动',tiem:'2025-1-10   8:00'},
  {id:'3',img:'src/static/img/server/neighborhoodimg/sft.png',tiltl:'开展"迎新春 送福 送春联"活动 ',tiem:'2025-1-19  9:00'},
]
</script>

<template>
  <view class="titli">
    <v-icon @click="goCommunity()" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>社区活动</h3>
  </view>
<!-- nav -->
  <ul class="nav">
    <li @click="activeItem = '活动'" :class="{ active: activeItem === '活动' }">活动</li>
    <li @click="activeItem = '话题'" :class="{ active: activeItem === '话题' }">话题</li>
  </ul>
<!-- 列表标题 -->
  <view class="lb1 w">
    <text class="houdong">活动精选</text>
    <text class="houdong">查看全部</text>
  </view>
  <view class="lb2 w">
    <ul>
      <li v-for="(item,index) in list2" :key="index">
        <img :src="item.img">
        <text>{{ item.tiltl }}</text>
        <text class="t">{{ item.tiem }}</text>
      </li>
    </ul>
  </view>
  <div class="container">
    <button class="fixed-button">+发活动</button>
  </div>
</template>

<style scoped lang="scss">
//标题

.fixed-button {
  width: 100px;
  height: 50px;
  line-height: 50px;
  position: fixed;
  bottom: 20px; /* 距离底部20px */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 向左移动自身宽度的一半 */
  background-color: #E6A23C; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去除边框 */
  border-radius: 100px; /* 圆角 */
  cursor: pointer; /* 鼠标指针样式 */
}
//列表2
.lb2{
  ul{
    li{
      .t{
        margin-left: 12px;
        color: #e0e0e0;
        font-size: 16px;
      }
      text{
        margin-top: 5px;
        font-size: 18px;
      }
      img{
        width: 100%;
        height: 200px;
        border-radius: 12px;
      }
      display: flex;
      flex-direction: column;
      margin: 10px 0;
    }
    display: flex;
    flex-direction: column;
  }
//  kong
}
//列表1
.lb1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: #E6A23C;
}
//mav
.nav{
      li {
        &.active {
          color: #E07320;
          font-weight: 500;
          height: 34px;
          border-bottom: 4px solid #E07320;
        }
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 0 10px;
      }
  width: 100%;
  height: 34px;
  background: #FFFFFF;
  display: flex;
  padding-left: 12px;
}
body{
  background: #F9F9F9;
}
body::-webkit-scrollbar{
  display: none;
}
@import "../../static/css/title/index.css";
</style>